---
import HomeLayout from '@/layouts/HomeLayout.astro';
import SponsorButton from '@/components/SponsorButton.vue';
import Icon from '@/components/Icon.vue';
import MainPageExample from '@/components/MainPageExample.vue';
import StarCount from '@/components/StarCount.vue';
import FeatureCard from '@/components/FeatureCard.vue';
import { features } from '@/constants';
import UiLibraries from '@/components/UiLibraries.vue';

const highlights = [
  {
    title: 'Flexible',
    details:
      'Offers both declarative components or composable functions API.<br><br>vee-validate sets up the foundation for you to <span title="pun intended">form</span> in whatever style you prefer.',
  },
  {
    title: 'Incremental',
    details:
      'vee-validate can do a lot if you let it. Like tracking values, validation, handling submissions and more. <br><br> You may opt-in or out to all of these aspects. You are in control of how much form code you write.',
  },
  {
    title: 'Great DX',
    details:
      'Vue.js devtools support.<br><br> vee-validate makes debugging forms much easier and less of a wild goose chase every time that form does not submit.',
  },
];
---

<HomeLayout>
  <div class="mt-6 md:mt-16 grid grid-cols-1 md:grid-cols-2 max-w-6xl mx-auto">
    <div class="flex flex-col items-start justify-center">
      <h1
        class="text-4xl md:text-6xl font-bold font-display bg-clip-text bg-gradient-to-r from-emerald-600 to-emerald-400 text-transparent leading-tight"
      >
        VeeValidate
      </h1>
      <p class="text-3xl md:text-5xl font-bold font-display">
        Painless <span
          class="bg-clip-text bg-gradient-to-r from-emerald-600 to-emerald-400 text-transparent leading-tight"
          >Vue
        </span>
         forms
      </p>
      <p class="mt-4 text-lg text-white-800 font-display">
        VeeValidate is the most popular Vue.js form library. It takes care of value tracking, validation, errors,
        submissions and more.
      </p>

      <div class="mt-8 flex items-center gap-4">
        <a
          class="flex items-center bg-gradient-to-br from-emerald-500 to-emerald-700 hover:from-emerald-600 hover:to-emerald-800 py-3 px-6 text-white rounded-lg text-center focus:outline-none focus:ring focus:ring-emerald-500 text-sm md:text-base font-medium font-display select-none whitespace-nowrap transition-colors duration-200"
          href="/v4/guide/overview/"
        >
          Get Started

          <Icon name="arrow-right" class="w-5 h-5 ml-2" />
        </a>

        <a
          class="bg-gray-200 hover:bg-gray-300 dark:bg-zinc-700 dark:hover:bg-zinc-800 py-3 px-6 rounded-lg text-center focus:outline-none whitespace-nowrap focus:ring focus:ring-emerald-500 font-medium font-display select-none text-sm md:text-base transition-colors duration-200"
          href="/v4/examples/checkboxes-and-radio/"
        >
          Live Examples
        </a>

        <div class="hidden md:block">
          <StarCount client:idle />
        </div>
      </div>
    </div>

    <img src="/v4/logo.png" width="300" height="300" class="hidden md:block ml-auto" alt="" />
  </div>

  <section class="mt-12 md:mt-24 grid grid-cols-1 md:grid-cols-3 gap-5 mx-auto min-w-0 max-w-6xl">
    {highlights.map(feature => <FeatureCard feature={feature} client:visible />)}
  </section>

  <section class="mt-24 flex flex-col mx-auto items-center">
    <h2 class="text-center text-gray-500 dark:text-gray-200 font-display font-bold text-2xl md:text-4xl mb-8">
      Works with your favorite UI framework
    </h2>

    <UiLibraries />

    <p class="mt-10 text-sm mx-auto">
      <span class="opacity-75 font-display">
        Listed libraries are ones with official examples, find more UI frameworks and libraries</span
      >
      <a href="/v4/examples/ui-libraries/" class="text-emerald-500 cursor-pointer">here</a>.
    </p>
  </section>

  <section class="mt-24 flex flex-col mx-auto items-center">
    <h2 class="text-center text-gray-500 dark:text-gray-200 font-display font-bold text-2xl md:text-4xl mb-6">
      Sponsors
    </h2>

    <object
      data="https://sponsors.logaretm.com/sponsors.svg"
      type="image/svg+xml"
      class="max-w-full"
      aria-label="Sponsors Image"></object>

    <p class="mt-8 font-display text-gray-600 dark:text-gray-400 text-center">
      You can also help this this project and my other projects by donating one time or by sponsoring via the following
      link
    </p>

    <br />

    <div class="mt-5 flex justify-center items-center">
      <SponsorButton size="lg" />
    </div>
  </section>

  <section class="mt-24 md:mt-48 max-w-6xl mx-auto">
    <h2 class="text-center text-gray-500 dark:text-gray-200 font-display font-bold text-2xl md:text-4xl">Features</h2>
    <ul
      class="mt-16 grid grid-flow-row md:grid-rows-4 min-w-0 mx-auto text-lg font-display font-semibold gap-x-20 gap-y-3 md:grid-flow-col justify-center features"
    >
      {features.map(feature => <li class="flex items-center">{feature.title}</li>)}
    </ul>
  </section>

  <section class="mt-24 md:mt-48 mx-auto max-w-4xl">
    <h2 class="text-center text-gray-500 dark:text-gray-200 font-display font-bold text-2xl md:text-4xl">
      Do more with less
    </h2>
    <p class="mt-4 text-center text-gray-300 text-lg font-display">
      In this example, value tracking, validation and submissions are handled in just a few lines of code
    </p>

    <MainPageExample client:visible />
  </section>
</HomeLayout>
